<template>
	<view class="cancellation">
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="form">
			<view class="userinfo">
				<label>
					<view class="title">
						手机号码
					</view>
					<view class="field">
						<u-input :value="phone" type="text" placeholder-style="font-size: 24rpx; color: #C0C4CC;"
							:disabled="true" placeholder="请输入您的手机号码" :clearable="false"></u-input>
					</view>
					<view class="send-code" @click="sendCode" v-if="getCode">
						发送验证码
					</view>
					<view class="send-code timer" @click="sendCode" v-else>
						重新发送({{time}})
					</view>
				</label>
				<label>
					<view class="title">
						验&nbsp;&nbsp;证&nbsp;码
					</view>
					<view class="field">
						<u-input v-model="code" type="text" maxlength="6"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="请输入您收到的验证码"
							:clearable="false"></u-input>
					</view>
				</label>
				<label>
					<view class="title">
						登录密码
					</view>
					<view class="field">
						<u-input v-model="password" maxlength="16" type="password"
							placeholder-style="font-size: 24rpx; color: #C0C4CC;" placeholder="请输入登录密码"
							:clearable="false"></u-input>
					</view>
				</label>
			</view>
			<view class="btn" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pwdValidator,
		codeValidator
	} from '@/util/validator.js'
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				time: 60,
				getCode: true
			}
		},
		methods: {
			show(title, type, callback) {
				this.$refs.uToast.show({
					title,
					type,
					duration: 1000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			// 获取用户信息
			getUserInfo() {
				request.globalRequest({
					url: "/api/member/user/info"
				}).then(res => {
					this.phone = res.userPhone && res.userPhone
				})
			},
			sendCode() {
				// 发送验证码
				request.globalRequest({
					url: '/api/public/code/sms/send',
					method: "post",
					data: {
						phone: this.phone,
						timestamp: new Date().getTime()
					}
				}).then(res => {
					console.log('res==>', res);
					if (res.status == "0") {
						this.show("验证码发送成功", "success")
						this.getCode = false
						this.timer = setInterval(() => {
							this.time--
							if (this.time == 0) {
								clearInterval(this.timer)
								this.getCode = true
								this.time = 60
							}
						}, 1000)
					}
				})
			},
			submit() {
				if (!codeValidator(this.code, this.show)) return
				if (!pwdValidator(this.password, this.show)) return
				request.globalRequest({
					url: "/api/member/user/log_out",
					method: "post",
					data: {
						phone: this.phone,
						code: this.code,
						password: this.password
					},
					headers: {
						userType: "MEMBER"
					}
				}).then(res => {
					if (res.status == "0") {
						this.show("注销成功", "success", () => {
							uni.removeStorageSync("usertoken")
							uni.navigateTo({
								url: "/pages/login/login"
							})
						})
					} else {
						this.show("注销失败", 'error')
					}

				})
			},
			onLoad() {
				const usertoken = uni.getStorageSync('usertoken')
				if (!usertoken) {
					return uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				this.getUserInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cancellation {
		padding: 0 20rpx 20rpx;

		.form {
			padding: 20rpx 20rpx 30rpx;
			background-color: #fff;

			.userinfo {

				label {
					display: flex;
					border-bottom: 1px solid #f1f1f1;
					margin-bottom: 20rpx;

					.title {
						font-size: 24rpx;
						color: #666666;
						padding: 20rpx;
						margin-right: 30rpx;
					}

					.field {
						flex: 1;
					}

					.send-code {
						font-size: 24rpx;
						color: #fff;
						display: flex;
						height: 50rpx;
						justify-content: center;
						align-items: center;
						background-color: #DD524D;
						padding: 0 30rpx;
						border-radius: 15rpx;
					}

					.send-code.timer {
						background-color: #aaa;
					}
				}
			}


			.btn {
				margin-top: 30rpx;
				text-align: center;
				background-color: #007AFF;
				border-radius: 16rpx;
				color: #fff;
				font-size: 28rpx;
				padding: 14rpx 0;
			}
		}
	}
</style>
